<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport"
		content="width=device-width, initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css" />

	<!-- 引入 Vue 和 Vant 的 JS 文件 -->
	<script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js"></script>
	<!-- vue ajax -->
	<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
	<script rc="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>

	<script src="/o2o/js/utils.js"></script>

	<title>商品分类列表</title>
	<style>
	</style>
</head>

<body>
	<div id="app">
		<!-- 头部导航 -->
		<van-nav-bar title="商品分类管理" left-text="返回" left-arrow @click-left="onClickBack"></van-nav-bar>
		<van-row style="text-align: center">
			<van-col span="8">商品分类名称</van-col>
			<van-col span="8">权重</van-col>
			<van-col span="8">操作</van-col>
		</van-row>
		<van-divider></van-divider>
		<!-- 商品分类信息展示 -->
		<van-list v-model:loading="state.loading" :finished="state.finished" @load="onLoad">
			<van-cell v-for="item in state.list" :key="item.productCategoryId">
				<van-row style="text-align: center">
					<van-col span="8">{{ item.productCategoryName }}</van-col>
					<van-col span="8">{{ item.priority }}</van-col>
					<van-col span="8">
						<van-button plain style="color:#1989fa;background-color: #fff;border-color:#1989fa" block
							@click="onClickDelete(item.productCategoryId)" size="small">删除</van-button>
					</van-col>
				</van-row>
			</van-cell>
			<van-cell>
				<van-button style="color:#fff;background-color: #1989fa" block @click="toAddProductCategory">新增</van-button>
			</van-cell>
		</van-list>
		<!-- 添加商品类别 -->
		<van-dialog v-model:show="show" title="添加商品类别" show-cancel-button @confirm="addProductCategory">
			<van-row style="text-align: center" >
					<van-col span="8">商品分类名称</van-col>
					<van-col span="7" offset="1">权重</van-col>
					<van-col span="7" offset="1"><van-button type="primary" size="small" @click="counter++">添加</van-button></van-col>
		  	</van-row>
			<van-row style="text-align: center">
				<span v-for="n in counter">
					<van-col span="11"><van-field v-model="productCategory.name[n-1]"  placeholder="请输入商品分类名" /></van-col>
					<van-col span="11" offset="2"><van-field v-model="productCategory.priority[n-1]" type="number" placeholder="请输入权重" /></van-col>
				</span>
		  	</van-row>
		</van-dialog>
	</div>
</body>

<script>
	
	Vue.use(vant.Dialog);
	Vue.use(vant.Field);
	//获取shopId参数
	let shopId = getQueryVariable("shopId");
	var app = new Vue({
		el: '#app',
		data: {
			counter:1,
			show: false,
			state: {
				list: [],
				loading: false,
				finished: false,
			},
			productCategory:{
				name:[],
				priority: [],
			},
		},
		methods: {
		
			// 添加商品分类
			addProductCategory:function(){
				let productCategoryList = [];
				this.productCategory.name.forEach((item,index) => {
					productCategoryList.push({shopId:shopId,productCategoryName:item,priority:this.productCategory.priority[index]});
				});

				axios.post('/o2o/shopadmin/productcategoryadd',{
					productCategoryInfo : JSON.stringify(productCategoryList),
				})
				.then(res => {
					console.log(res.data,"商品分类添加");
					if(res.data.success){
						location.reload();
					}else{
						console.log(res.data.msg);
					}
				})
				.catch(function(err){
					console.log(err);
				})
			},
			// 返回按钮
			onClickBack: function () {
				window.history.back();
			},
			// 控制弹出添加商品类别窗口
			toAddProductCategory:function(){
				this.show = !this.show;
			},
			// 删除商品分类
			onClickDelete: function (id) {
				axios.get('/o2o/shopadmin/productcategoryremove?productCategoryId=' + id)
					.then(res => {
						if (res.status == 200 && res.data.success) {
							location.reload();
						} else {
							alert("删除失败");
						}
					})
					.catch(function (error) { // 请求失败处理
						console.log(error);
					})
			},
			// 获取店铺列表
			onLoad() {

				axios.get('/o2o/shopadmin/productcategorylist?shopId=' + shopId).then(res => {
					console.log(res, "res");
					if (res.status == 200) {
						let productCategoryList = res.data.productCategoryList;
						productCategoryList.forEach(item => {
							this.state.list.push(item);
						});
					}

					// 加载状态结束
					this.state.loading = false;

					// 数据全部加载完成
					if (this.state.list.length >= res.data.count) {
						this.state.finished = true;
					}
				})
			}
		}
	});
	app.$watch('counter', function(nval, oval) {
	    if(oval>=10){
	    	app.counter = 10;
	    }
	});


</script>

</html>